{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">

    <link rel="stylesheet" href="{% static 'css/jq-confirm.css' %}">
    <link rel="stylesheet" href="{% static 'css/xx.css' %}">
    <style>
        .d5 {
            margin-left: 10px;
            margin-top: -10px;
        }

    </style>
</head>
<body>

<div class="container">
    <div class="kk">
        <h1 align='center'>用户信息管理系统</h1>
    </div>
    <div class="panel-heading">
        <h1 class="panel-title">用户信息表</h1>
    </div>


    <div class="panel panel-default">
        <a href="/add_user/" class="btn btn-primary pull-right">添加用户</a>
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>用户id值</th>
                        <th>用户名</th>
                        <th>手机号</th>
                        <th>性别</th>
                        <th>用户的角色名称</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        {% for us in user_list %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ us.id }}</td>
                                <td>{{ us.username }}</td>
                                <td>{{ us.phone_number }}</td>
                                <td>{{ us.ad.get_sex_display }}</td>

                                <td>
                                    {% for role in us.roles.all %}
                                        <span>{{ role.role_name }}</span>
                                        {% if not forloop.last %}
                                            ,
                                        {% endif %}

                                    {% endfor %}

                                </td>
                                <td>
                                    <a href="/edit_user/{{ us.id }}" class="btn btn-success btn-sm">编辑</a>
                                    <button class="btn btn-danger bt1" value="{{ us.id }}">删除</button>

                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

        </div>
        {#        <a href="/add_user/" class="btn btn-primary pull-right">添加用户</a>#}
    </div>
    <div class="">
        <form action="/sousuo/" method="get">
            <div class="input-group d6">

                <input type="text" class="form-control" placeholder="搜索" name="sousuo">
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-default " type="button">搜索</button>
                  </span>

            </div><!-- /input-group -->
        </form>
    </div>
    <div class="col-md-2">
        <div class="d5">
            <p id="p1">
            <h3>上传图片</h3></p>
            {% if request.session.zurl %}
                <img id="aq" style="width:100px;height:100px;border:solid 0px;" src="{{ request.session.zurl }}">
            {% else %}
                <img id="aq" style="width:100px;height:100px;border:solid 0px;">
            {% endif %}
            <input type="file" accept="image/*" id="mm" name="ggg" style='display:none'>
        </div>
    </div>
    <div class="list-group">
        {% for kq in caidan_dict %}
            {% if kq.url == request.session.url %}
                <a href="{{ kq.url }}" class="list-group-item  list-group-item-success "><i class=""
                                                                                            aria-hidden="true"></i> {{ kq.value }}
                </a>
            {% else %}
                <a href="{{ kq.url }}" class="list-group-item list-group-item-warning "><i class=""
                                                                                           aria-hidden="true"></i> {{ kq.value }}
                </a>
            {% endif %}

        {% endfor %}
    </div>
</div>
</body>
<script src="{% static 'jquery.js' %}"></script>

<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery-1.10.2.js' %}"></script>
<script src="{% static 'js/jquery.extends.confirm.js' %}"></script>

<script type="text/javascript">
    $(function () {
        var a = '';

        function submit() {
            x = a.val()
            $.ajax({
                type: 'get',
                url: `/ajax_del/${x}`,
                success: function (res) {
                    console.log(a)
                    a.parent().parent().remove()
                }
            })

        }

        function cancle() {

        }

        $('.bt1').on('click', function () {
            $.confirm("删除后数据不可恢复，确认删除？", submit, cancle);
            a = $(this)
        });
    });
</script>

<script>
    $('#aq').click(function () {
        $('#mm').click();

        $('#mm').change(function () {
            var file_obj = $(this)[0].files[0];
            var formdata = new FormData();
            formdata.append('ggg', file_obj);
            formdata.append('csrfmiddlewaretoken', '{{csrf_token}}');
            $.ajax({
                url: '/upload/',
                type: 'post',
                data: formdata,
                contentType: false,
                processData: false,

                success: function (path) {
                    {#location.reload();#}

                    $('#aq').attr('src', path)
                }
            })
        })
    })
</script>
</html>